var markers = [];
var map;
var infowindow = new google.maps.InfoWindow;
var styles = [
    {
        "featureType": "road.highway.controlled_access",
        "elementType": "geometry",
        "stylers": [
            {"color": "#ffbb4d"}
        ]
    }, {
        "featureType": "road.arterial",
        "elementType": "geometry.fill",
        "stylers": [
            {"visibility": "on"},
            {"color": "#ffbb4d "}
        ]
    }, {
        "featureType": "administrative.locality",
        "stylers": [
            {"visibility": "on"}
        ]
    }, {
    }
];
var styledMap = new google.maps.StyledMapType(styles, {name: "Mapa"});

function mostrarInfo(marker, id) {
}

/* Función de inicio de carga para el mapa Google */
function dibujarMapa() {
    /* configuración de elemento mapa Google */
    var mapOptions = {
        zoom: 5,
        mapTypeId: google.maps.MapTypeId.HYBRID,
        scaleControl: true,
        streetViewControl: false,
        scrollwheel: true,
        center: new google.maps.LatLng(-9.276068,-81.6113114),
        panControl: true,
        panControlOptions: {
            position: google.maps.ControlPosition.TOP_RIGHT
        },
        zoomControl: true,
        zoomControlOptions: {
            style: google.maps.ZoomControlStyle.LARGE,
            position: google.maps.ControlPosition.TOP_RIGHT
        }
    };

    /* creación de elemento mapa Google */
    map = new google.maps.Map(document.getElementById("mapaNacional"), mapOptions);
    map.mapTypes.set('map_style', styledMap);
    map.setMapTypeId('map_style');

    cargaMarkers(-6.7771244, -79.8495555, "Chiclayo");
    cargaMarkers(-4.5614198, -81.240675, "Talara");

    /* permite ocultar panel lateral al evento click sobre el mapa, no sobre los marcadores */
    google.maps.event.addListener(map, 'click', function () {
        removeClass(controlesMapaId, 'active');
    });
    controlesMapaId.click();
}

function cargaMarkers(latitud, longitud, title) {
    var place = new google.maps.LatLng(latitud, longitud);
    var marker = new google.maps.Marker({
        position: place,
        map: map,
        title: title,
        icon: {
            url: 'images/sindatos.png'
        },
        visible: true
    });
    google.maps.event.addListener(marker, 'click', function () {
        var nodePM = document.createElement('div');
        cargaInfo(marker, nodePM, "BLA BLA");
    });
}

function cargaInfo(marker, nodePM, textName) {
    var parentNode = document.createElement('div');
    addClass(parentNode, 'popupInfo');

    var titleNode = document.createElement('h1');
    titleNode.appendChild(document.createTextNode(textName));

    var a = document.createElement('a');
    var linkText = document.createTextNode("ver ficha");
    a.appendChild(linkText);
    a.title = "Ir a ficha";
    a.href = "http://google.com.pe";
    a.target = "_blank";
    addClass(a, 'ficha');

    var comunaNode = document.createElement('p');
    addClass(comunaNode, 'comuna');
    comunaNode.appendChild(document.createTextNode("TEST TEXT"));

    var titleQueryTime = document.createElement('p');
    addClass(titleQueryTime, 'timestamp');
    var tabla = document.createElement('div');
    tabla.innerHTML = "INFO LORE IPSUM";

    var b = document.createElement('a');
    var linkDescargaB = document.createTextNode("niveles");
    b.appendChild(linkDescargaB);
    b.href = "javascript:showNiveles();";
    addClass(b, 'graficos');

    var c = document.createElement('a');
    var linkDescargaC = document.createTextNode("concentraciones horarias");
    c.appendChild(linkDescargaC);
    c.href = "javascript:showHorarios();";
    addClass(c, 'descarga');

    var d = document.createElement('a');
    var linkDescargaD = document.createTextNode("descargar CSV");
    d.appendChild(linkDescargaD);
    d.href = '#';
    addClass(d, 'download');

    var cleanDiv = document.createElement('div');
    addClass(cleanDiv, 'break');
    var cleanDiv2 = cleanDiv.cloneNode(true);

    var halfWidth = document.createElement('div');
    addClass(halfWidth, 'half');
    var halfWidth2 = halfWidth.cloneNode();
    addClass(halfWidth2, 'step');

    var tab1 = document.createElement('div');
    var tab2 = document.createElement('div');
    tab1.setAttribute('id', 'tab1');
    tab2.setAttribute('id', 'tab2');
    addClass(tab2, 'hidden');

    parentNode.appendChild(titleNode);
    parentNode.appendChild(comunaNode);
    parentNode.appendChild(a);
    parentNode.appendChild(b);
    parentNode.appendChild(c);
    parentNode.appendChild(d);
    parentNode.appendChild(cleanDiv);
    halfWidth.appendChild(nodePM);
    halfWidth.appendChild(titleQueryTime);
    halfWidth2.appendChild(tabla);
    tab1.appendChild(halfWidth);
    tab1.appendChild(halfWidth2);
    parentNode.appendChild(tab1);
    parentNode.appendChild(tab2);
    parentNode.appendChild(cleanDiv2);

    map.panTo(marker.getPosition());

    infowindow.close();
    infowindow.setContent(parentNode);
    infowindow.open(map, marker);
    //updateStation(marker, stnId, false);
    removeClass(document.getElementById('controlesMapaId'), 'active');
}

google.load("visualization", "1", {packages: ["corechart"]});
google.maps.event.addDomListener(window, 'load', dibujarMapa);